import { Button, Image, Popconfirm, Space, Table } from 'antd';
import { useEffect, useState } from 'react';
import { useHeight } from '../../utils/useHeight';
import { Link } from 'react-router-dom';
import { DeleteOutlined } from '@ant-design/icons'
import axios from 'axios'


type BuyListProps = {}
// 轮播图端口号
interface DataType {
    id: string,
    bannerPic: string
}


export const BuyList = (props: BuyListProps) => {
    const [bannerList, setBannerList] = useState<DataType[]>([])
    const height = useHeight()

    const [current, setCurrent] = useState<number>(1) // 页码
    const [pageSize, setPageSize] = useState<number>(10) // 每页显示个数

    const baseURL = 'http://localhost:12580/bannerBuy'
    // 发送请求获取数据
    const getData = async () => {
        await axios({
            url: baseURL,
            method: 'get'
        }).then(res => {
            console.log(res.data)
            setBannerList(res.data)
        })

    }


    const deleteBanner = async (id: string) => {
        console.log(id);
       
        await axios({
            url: baseURL+'/'+id,
            // data: row,
            method: 'delete'
        }).then(res => {
            console.log(res.data)
            getData()
        })

    }




    // 模拟生命周期componentDidMount
    useEffect(() => {
        getData()
    }, [])

    return (
        <Space direction='vertical' style={{ width: '100%' }}>
            <Link to="/banner/addBL"  >
                <Button type='primary'>添加轮播图</Button>
            </Link>
            <Table
                dataSource={bannerList}
                rowKey="id"
                scroll={{ y: height }}
                bordered
                pagination={{
                    current,
                    pageSize,
                    onChange(page, pageSize) {
                        setCurrent(page)
                        setPageSize(pageSize)
                    }
                }}
            >
                <Table.Column
                    title="序号"
                    dataIndex="id"
                ></Table.Column>
                <Table.Column
                    title="图片"
                    dataIndex="bannerPic"
                    render={(text) => { return <Image src={text} width={200} height={100} /> }}
                ></Table.Column>
                <Table.Column
                    title="操作"
                    render={(text, record: DataType, index) => {
                        return (
                            <Space>
                                <Popconfirm
                                    title="确定删除吗?"
                                    onConfirm={() => {
                                        console.log(record.id, record);
                                        deleteBanner(record.id)
                                    }}
                                    onCancel={() => { }}
                                    okText="确定"
                                    cancelText="再想想"
                                >
                                    <Button danger shape="circle" icon={<DeleteOutlined />} />
                                </Popconfirm>
                            </Space>
                        )
                    }}
                ></Table.Column>
            </Table>
        </Space>
    )
}